<template>
	<view>
		<view class="container bg-ghostWhite">
			<view class="m-hairline--bottom foot-line"></view>
			<image class="m-backdrop" src="../../static/icon/icon_back1.png" mode="widthFix"></image>
			<view class="m-header">
				<image class="m-backdrop" src="../../static/icon/icon_back1.png" mode="widthFix"></image>
				<view class="g-custom-nav"
					:style="{ paddingTop: statusBarHeight + 'px', height: 'calc(90rpx + ' + statusBarHeight + 'px)' }">
					<view class="top-tabbar flex-box flex-between col-f">
						<view class="item" v-for="(item, index) in topTabList"
							:class="{ active: topTabCurrent === index }" @click="topTabClick(index)">{{ item }}</view>
						<!-- <navigator class="item" url="/pages/topic/topic" hover-class="none"></navigator> -->
					</view>
				</view>
			</view>
			<!--  -->
			<view class="pr p30" :style="{ paddingTop: 'calc(90rpx + ' + statusBarHeight + 'px)' }">
				<block v-if="topList.length > 0 && topTabCurrent == 2">
					<view class="topic-box ptb40 plr30 bg-white br15 mtb20">
						<view class="flex-box mb40">
							<view class="fs30 col-3 flex-1">最新话题</view>
							<navigator class="fs24 col-9" url="/pages/topic/topic" hover-class="none">查看更多+</navigator>
						</view>
						<navigator :url="'/pages/topic_detail/topic_detail?topic_id=' + item.id" hover-class="none"
							class="topic-item flex-box" v-for="(item, index) in topList" :key="item.id">
							<view class="flex-1">
								<view class="topic-title fs28 col-3 mb15 fwb">{{ item.name }}</view>
								<view class="fs24 col-9">{{ item.forumuser_count }}参与 {{ item.forum_count }}动态</view>
							</view>
							<view class="btn1">参与讨论</view>
						</navigator>
					</view>
				</block>
				<!--  -->
				<view class="post-box br15">
					<block v-if="topTabCurrent == 0">
						<block>
							<view class="post-item ptb40 plr30" :key="item.id" v-for="(item, index) in hotList">
								<view class="flex-box mb40 flex-align-start">
									<image class="img-head mr20 mt5" :src="item.user == null ? '' : item.user.avatar"
										mode="aspectFill"></image>
									<view class="flex-1">
										<view class="mb15 fs30 col-3 fwb">
											{{ item.user == null ? '' : item.user.nickname }}</view>
										<view class="fs24 col-9">
											{{ $formatDatetime(item.updatetime, 'yyyy-mm-dd hh:ii:ss') }}</view>
									</view>
									<view v-if="item.is_focus_count == 0" class="btn1"
										@click="toggleFocusUser(item.user_id)">关注</view>
									<view v-else class="btn2" @click="toggleFocusUser(item.user_id)">已关注</view>
								</view>
								<navigator :url="'/pages/discover_detail/discover_detail?id=' + item.id"
									hover-class="none">
									<view class="text mb20">{{ item.content }}</view>
									<block v-if="item.images.length > 0 && item.images[0].length > 0">
										<view class="img-box flex flex-align-start flex-wrap">
											<image v-for="img in item.images" :src="img"
												:class="{ img1: item.images.length == 1, img2: item.images.length == 2, img3: item.images.length >= 3 }"
												mode="aspectFill"></image>
										</view>
									</block>
								</navigator>
								<navigator :url="'/pages/topic_detail/topic_detail?topic_id=' + item.topic_id"
									class="topic mt20 mb10" hover-class="none">{{ item.topic.name }}</navigator>
								<view class="flex-box flex-end">
									<navigator :url="'/pages/discover_detail/discover_detail?id=' + item.id"
										hover-class="none" class="m-button flex-box flex-center">
										<image class="icon mr10" src="/static/icon/icon_share5.png" mode="aspectFit">
										</image>
										<view class="fs26 col-3">分享</view>
									</navigator>
									<button class="m-button flex-box flex-center">
										<image class="icon mr10" src="/static/icon/icon_comment1.png" mode="aspectFit">
										</image>
										<view class="fs26 col-3">{{ item.comment_count }}</view>
									</button>
									<button class="m-button flex-box flex-center" @click="toggleFav(item.id)">
										<image v-if="item.is_fav_count == 0" class="icon mr10"
											src="/static/icon/icon_thumbs_normal.png" mode="aspectFit"></image>
										<image v-else class="icon mr10" src="/static/icon/icon_thumbs_selected.png"
											mode="aspectFit"></image>
										<view class="fs26 col-3">{{ item.fav_count }}</view>
									</button>
								</view>
							</view>
						</block>
						<!--  -->
						<view class="g-btn3-wrap mt30">
							<view class="g-btn3"
								:class="{ nomore: hotListMore.nomore == true || hotListMore.loading == true }"
								@click="getHotList">{{ hotListMore.text }}</view>
						</view>
					</block>

					<block v-if="topTabCurrent == 1">
						<view class="post-item ptb40 plr30" v-for="(item, index) in focusList" :key="item.id">
							<view class="flex-box mb40 flex-align-start">
								<image class="img-head mr20 mt5" :src="item.user == null ? '' : item.user.avatar"
									mode="aspectFill"></image>
								<view class="flex-1">
									<view class="mb15 fs30 col-3 fwb">{{ item.user == null ? '' : item.user.nickname }}
									</view>
									<view class="fs24 col-9">
										{{ $formatDatetime(item.updatetime, 'yyyy-mm-dd hh:ii:ss') }}</view>
								</view>
								<view v-if="item.is_focus_count == 0" class="btn1"
									@click="toggleFocusUser(item.user_id)">关注</view>
								<view v-else class="btn2" @click="toggleFocusUser(item.user_id)">已关注</view>
							</view>
							<navigator :url="'/pages/discover_detail/discover_detail?id=' + item.id" hover-class="none">
								<view class="text mb20">{{ item.content }}</view>
								<block v-if="item.images.length > 0 && item.images[0].length > 0">
									<view class="img-box flex flex-align-start flex-wrap">
										<image v-for="img in item.images" :src="img"
											:class="{ img1: item.images.length == 1, img2: item.images.length == 2, img3: item.images.length >= 3 }"
											mode="aspectFill"></image>
									</view>
								</block>
							</navigator>
							<navigator :url="'/pages/topic_detail/topic_detail?topic_id=' + item.topic_id"
								class="topic mt20 mb10" hover-class="none">{{ item.topic.name }}</navigator>
							<view class="flex-box flex-end">
								<navigator :url="'/pages/discover_detail/discover_detail?id=' + item.id"
									hover-class="none" class="m-button flex-box flex-center">
									<image class="icon mr10" src="/static/icon/icon_share5.png" mode="aspectFit">
									</image>
									<view class="fs26 col-3">分享</view>
								</navigator>
								<button class="m-button flex-box flex-center">
									<image class="icon mr10" src="/static/icon/icon_comment1.png" mode="aspectFit">
									</image>
									<view class="fs26 col-3">{{ item.comment_count }}</view>
								</button>
								<button class="m-button flex-box flex-center" @click="toggleFav(item.id)">
									<image v-if="item.is_fav_count == 0" class="icon mr10"
										src="/static/icon/icon_thumbs_normal.png" mode="aspectFit"></image>
									<image v-else class="icon mr10" src="/static/icon/icon_thumbs_selected.png"
										mode="aspectFit"></image>
									<view class="fs26 col-3">{{ item.fav_count }}</view>
								</button>
							</view>
						</view>
						<!--  -->
						<view class="g-btn3-wrap mt30">
							<view class="g-btn3"
								:class="{ nomore: focusListMore.nomore == true || focusListMore.loading == true }"
								@click="getFocusList">{{ focusListMore.text }}</view>
						</view>
					</block>

					<block v-if="topTabCurrent == 2">
						<block>
							<view class="post-item ptb40 plr30" v-for="(item, index) in allList" :key="item.id">
								<view class="flex-box mb40 flex-align-start">
									<image class="img-head mr20 mt5" :src="item.user == null ? '' : item.user.avatar"
										mode="aspectFill"></image>
									<view class="flex-1">
										<view class="mb15 fs30 col-3 fwb">
											{{ item.user == null ? '' : item.user.nickname }}</view>
										<view class="fs24 col-9">
											{{ $formatDatetime(item.updatetime, 'yyyy-mm-dd hh:ii:ss') }}</view>
									</view>
									<view v-if="item.is_focus_count == 0" class="btn1"
										@click="toggleFocusUser(item.user_id)">关注</view>
									<view v-else class="btn2" @click="toggleFocusUser(item.user_id)">已关注</view>
								</view>
								<navigator :url="'/pages/discover_detail/discover_detail?id=' + item.id"
									hover-class="none">
									<view class="text mb20">{{ item.content }}</view>
									<block v-if="item.images.length > 0 && item.images[0].length > 0">
										<view class="img-box flex flex-align-start flex-wrap">
											<image v-for="img in item.images" :src="img"
												:class="{ img1: item.images.length == 1, img2: item.images.length == 2, img3: item.images.length >= 3 }"
												mode="aspectFill"></image>
										</view>
									</block>
								</navigator>
								<navigator :url="'/pages/topic_detail/topic_detail?topic_id=' + item.topic_id"
									class="topic mt20 mb10" hover-class="none">{{ item.topic.name }}</navigator>
								<view class="flex-box flex-end">
									<navigator :url="'/pages/discover_detail/discover_detail?id=' + item.id"
										hover-class="none" class="m-button flex-box flex-center">
										<image class="icon mr10" src="/static/icon/icon_share5.png" mode="aspectFit">
										</image>
										<view class="fs26 col-3">分享</view>
									</navigator>
									<button class="m-button flex-box flex-center">
										<image class="icon mr10" src="/static/icon/icon_comment1.png" mode="aspectFit">
										</image>
										<view class="fs26 col-3">{{ item.comment_count }}</view>
									</button>
									<button class="m-button flex-box flex-center" @click="toggleFav(item.id)">
										<image v-if="item.is_fav_count == 0" class="icon mr10"
											src="/static/icon/icon_thumbs_normal.png" mode="aspectFit"></image>
										<image v-else class="icon mr10" src="/static/icon/icon_thumbs_selected.png"
											mode="aspectFit"></image>
										<view class="fs26 col-3">{{ item.fav_count }}</view>
									</button>
								</view>
							</view>
						</block>
						<view class="g-btn3-wrap mt30">
							<view class="g-btn3"
								:class="{ nomore: allListMore.nomore == true || allListMore.loading == true }"
								@click="getAllList">{{ allListMore.text }}</view>
						</view>
					</block>


					<!-- 新增 我的帖子 -->
					<block v-if="topTabCurrent == 3">
						<block>
							<view class="post-item ptb40 plr30" v-for="(item, index) in myList" :key="item.id">
								<view class="flex-box mb20">
									<view class="flex-1 fs24 col-9">
										{{ $formatDatetime(item.updatetime, 'yyyy-mm-dd hh:ii:ss') }}
									</view>
									<view class="col-normal fs24">
										{{item.check_status == 1 ? '待审核' : item.check_status == 2 ? '已通过' : '已拒绝'}}
									</view>
								</view>
								<navigator :url="'/pages/discover_detail/discover_detail?id=' + item.id"
									hover-class="none">
									<view class="text mb20">{{ item.content }}</view>
									<block v-if="item.images.length > 0 && item.images[0].length > 0">
										<view class="img-box flex flex-align-start flex-wrap">
											<image v-for="img in item.images" :src="img"
												:class="{ img1: item.images.length == 1, img2: item.images.length == 2, img3: item.images.length >= 3 }"
												mode="aspectFill"></image>
										</view>
									</block>
								</navigator>
								<navigator :url="'/pages/topic_detail/topic_detail?topic_id=' + item.topic_id"
									class="topic mt20 mb10" hover-class="none">{{ item.topic.name }}</navigator>
								<view class="flex-box">
									<view class="m-button flex-box flex-center" style="margin-left: 0;"
										@click="deleteMyPost(item.id)">
										<image class="icon mr10" src="/static/icon/ico_delete.png" mode="aspectFit">
										</image>
										<view class="fs26 col-9">删除</view>
									</view>
									<view class="flex-1"></view>
									<navigator :url="'/pages/discover_detail/discover_detail?id=' + item.id"
										hover-class="none" class="m-button flex-box flex-center">
										<image class="icon mr10" src="/static/icon/icon_share5.png" mode="aspectFit">
										</image>
										<view class="fs26 col-3">分享</view>
									</navigator>
									<button class="m-button flex-box flex-center">
										<image class="icon mr10" src="/static/icon/icon_comment1.png" mode="aspectFit">
										</image>
										<view class="fs26 col-3">{{ item.comment_count }}</view>
									</button>
									<!-- item.check_status == 2 ? toggleFav(item.id) : '' -->
									<button class="m-button flex-box flex-center" @click="toggleFav(item.id)">
										<image v-if="item.is_fav_count == 0" class="icon mr10"
											src="/static/icon/icon_thumbs_normal.png" mode="aspectFit"></image>
										<image v-else class="icon mr10" src="/static/icon/icon_thumbs_selected.png"
											mode="aspectFit"></image>
										<view class="fs26 col-3">{{ item.fav_count }}</view>
									</button>
								</view>
							</view>
						</block>
						<view class="g-btn3-wrap mt30">
							<view class="g-btn3"
								:class="{ nomore: myListMore.nomore == true || myListMore.loading == true }"
								@click="getMyList">{{ myListMore.text }}</view>
						</view>
					</block>


				</view>
			</view>
		</view>
		<navigator class="icon-gotop" url="/pages/release/release" hover-class="none">
			<image src="/static/icon/icon_btn_add.png" mode="aspectFit"></image>
		</navigator>
	</view>
</template>

<script>
	const util = require('../../xiluedu/util.js');
	export default {
		data() {
			return {
				statusBarHeight: 20,
				topTabList: ['推荐', '关注', '广场', '我的'],
				topTabCurrent: 0,
				topList: [],
				hotList: [],
				hotListMore: {
					page: 1
				},
				focusList: [],
				focusListMore: {
					page: 1
				},
				allList: [],
				allListMore: {
					page: 1
				},
				myList: [],
				myListMore: {
					page: 1
				}
			};
		},
		onLoad() {
			this.statusBarHeight = getApp().globalData.statusBarHeight;
			this.getTopList();
			this.getHotList();
			this.getFocusList();
			this.getAllList();
			this.getMyList()
			uni.$on('discoverRefresh', data => {
				this.getTopList();
				this.refreshHot();
				this.refreshFocus();
				this.refreshAll();
				this.refreshMy()
			});
			uni.$on('setTabIdx', data => {
				this.topTabClick(data);
			});
		},
		onPullDownRefresh() {
			uni.$emit('discoverRefresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 顶部最新话题
			getTopList() {
				this.$core.get({
					url: 'xiluedu.topic/top_lists',
					data: {
						pagesize: 2
					},
					success: ret => {
						if (ret.code == 1) {
							if (ret.data != null) {
								this.topList = ret.data.splice(0, 2);
							}
						}
					}
				});
			},
			// 热门帖子列表
			getHotList() {
				util.fetch(this, 'xiluedu.forum/hot_lists', {
					pagesize: 10
				}, 'hotListMore', 'hotList', 'data', data => {
					data.data.map(item => {
						item.images = item.images.split(',');
					});
				});
			},
			// 关注帖子列表
			getFocusList() {
				util.fetch(this, 'xiluedu.forum/focus_lists', {
					pagesize: 10
				}, 'focusListMore', 'focusList', 'data', data => {
					data.data.map(item => {
						item.images = item.images.split(',');
					});
				});
			},
			// 所有帖子列表
			getAllList() {
				util.fetch(this, 'xiluedu.forum/lists', {
					pagesize: 10
				}, 'allListMore', 'allList', 'data', data => {
					data.data.map(item => {
						item.images = item.images.split(',');
					});
				});
			},
			// 我的帖子列表
			getMyList() {
				util.fetch(this, 'xiluedu.forum/my_lists', {
					pagesize: 10
				}, 'myListMore', 'myList', 'data', data => {
					data.data.map(item => {
						item.images = item.images.split(',');
					});
				});

			},
			// 点赞
			toggleFav(forum_id) {
				this.$core.post({
					url: 'xiluedu.forum/toggle_fav',
					data: {
						forum_id: forum_id
					},
					success: ret => {
						for (let i = 0; i < this.hotList.length; i++) {
							if (forum_id == this.hotList[i].id) {
								if (ret.data.is_fav_count == 0) {
									this.hotList[i].fav_count = this.hotList[i].fav_count - 1;
								} else {
									this.hotList[i].fav_count = this.hotList[i].fav_count + 1;
								}
								this.hotList[i].is_fav_count = ret.data.is_fav_count;
							}
						}

						for (let i = 0; i < this.focusList.length; i++) {
							if (forum_id == this.focusList[i].id) {
								if (ret.data.is_fav_count == 0) {
									this.focusList[i].fav_count = this.focusList[i].fav_count - 1;
									// if (this.focusList[i].fav_count <0){
									// 	this.focusList[i].fav_count = 0
									// }
								} else {
									this.focusList[i].fav_count = this.focusList[i].fav_count + 1;
								}
								this.focusList[i].is_fav_count = ret.data.is_fav_count;
							}
						}

						for (let i = 0; i < this.allList.length; i++) {
							if (forum_id == this.allList[i].id) {
								if (ret.data.is_fav_count == 0) {
									this.allList[i].fav_count = this.allList[i].fav_count - 1;
								} else {
									this.allList[i].fav_count = this.allList[i].fav_count + 1;
								}
								this.allList[i].is_fav_count = ret.data.is_fav_count;
							}
						}

						for (let i = 0; i < this.myList.length; i++) {
							if (forum_id == this.myList[i].id) {
								if (ret.data.is_fav_count == 0) {
									this.myList[i].fav_count = this.myList[i].fav_count - 1;
								} else {
									this.myList[i].fav_count = this.myList[i].fav_count + 1;
								}
								this.myList[i].is_fav_count = ret.data.is_fav_count;
							}
						}

					},
					fail: err => {}
				});
			},
			// 关注取关
			toggleFocusUser(user_id) {
				this.$core.post({
					url: 'xiluedu.forum/toggle_focus',
					data: {
						user_id: user_id
					},
					success: ret => {
						for (let i = 0; i < this.hotList.length; i++) {
							if (user_id == this.hotList[i].user_id) {
								this.hotList[i].is_focus_count = ret.data.is_focus_count;
							}
						}
						for (let i = 0; i < this.allList.length; i++) {
							if (user_id == this.allList[i].user_id) {
								this.allList[i].is_focus_count = ret.data.is_focus_count;
							}
						}
						this.refreshFocus();
					},
					fail: err => {
						console.log(err);
					}
				});
			},
			refreshHot() {
				this.hotList = [];
				this.hotListMore = {
					page: 1
				};
				this.getHotList();
				uni.hideLoading();
			},
			refreshFocus() {
				this.focusList = [];
				this.focusListMore = {
					page: 1
				};
				this.getFocusList();
				uni.hideLoading();
			},
			refreshAll() {
				this.allList = [];
				this.allListMore = {
					page: 1
				};
				this.getAllList();
				uni.hideLoading();
			},
			refreshMy() {
				this.myList = [];
				this.myListMore = {
					page: 1
				};
				this.getMyList();
				uni.hideLoading();
			},
			// 点击顶部tab
			topTabClick(i) {
				this.topTabCurrent = i;
			},
			// 删帖
			deleteMyPost(id) {
				let that = this;
				uni.showModal({
					title: "确认删除",
					success: function(res) {
						if (res.confirm) {
							that.$core.post({
								url: 'xiluedu.forum/del_forum',
								data: {
									forum_id: id
								},
								success: ret => {
									uni.showToast({
										title: '删除成功'
									})
									that.refreshMy()
								},
								fail: err => {
									console.log(err);
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			}
		}
	};
</script>

<style scoped>
	.top-tabbar {
		padding: 0 200rpx;
		height: 90rpx;
	}

	.top-tabbar .item {
		font-size: 32rpx;
		font-weight: 500;
		opacity: 0.7;
		line-height: 90rpx;
	}

	.top-tabbar .item.active {
		font-weight: bold;
		opacity: 1;
	}

	/*  */
	.topic-box .topic-item+.topic-item {
		margin-top: 25rpx;
	}

	.topic-box .btn1 {
		width: 130rpx;
		height: 44rpx;
		border: 1px solid #ed1f34;
		border-radius: 4rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #ed1f34;
		line-height: 44rpx;
		text-align: center;
	}

	.topic-box .topic-title {
		position: relative;
	}

	/* .topic-box .topic-title::before {
	content: '#';
}
.topic-box .topic-title::after {
	content: '#';
} */
	/*  */
	.post-box .post-item {
		border-bottom: 1rpx solid #f7f7f7;
		background-color: #fff;
	}

	.post-box .img-head {
		display: block;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.post-box .btn1 {
		width: 80rpx;
		height: 36rpx;
		border: 1rpx solid #ececec;
		border-radius: 4rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
		line-height: 32rpx;
		text-align: center;
	}

	.post-box .btn2 {
		font-size: 24rpx;
		font-weight: 500;
		color: #999999;
	}

	.post-box .text {
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		line-height: 46rpx;
	}

	.post-box image {
		display: block;
	}

	.post-box .img1 {
		margin: 0 0 20rpx;
		width: 418rpx;
		height: 428rpx;
	}

	.post-box .img2 {
		margin: 0 12rpx 12rpx 0;
		width: 304rpx;
		height: 278rpx;
	}

	.post-box .img2:nth-of-type(2n) {
		margin: 0 0 12rpx;
	}

	.post-box .img3 {
		margin: 0 12rpx 12rpx 0;
		width: 200rpx;
		height: 200rpx;
	}

	.post-box .img3:nth-of-type(3n) {
		margin: 0 0 12rpx;
	}

	.post-box .topic {
		font-size: 26rpx;
		font-weight: 500;
		color: #5964b8;
	}

	/* .post-box .topic::before {
	content: '#';
}
.post-box .topic::after {
	content: '#';
} */
	.post-box .icon {
		display: block;
		width: 28rpx;
		height: 28rpx;
	}

	.post-box .m-button {
		padding-top: 20rpx;
		margin-left: 60rpx;
		line-height: 30rpx;
	}

	.icon-gotop {
		position: fixed;
		right: 30rpx;
		bottom: 110rpx;
		z-index: 5;
		display: block;
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
	}

	.icon-gotop image {
		display: block;
		width: 96rpx;
		height: 96rpx;
	}

	.scroll-tab {
		padding: 0 30rpx;
		height: 100rpx;
		overflow-x: scroll;
		white-space: nowrap;
		background-color: #fff;
		border-bottom: 1rpx solid #efefef;
	}

	.scroll-tab .scroll-item {
		display: inline-block;
		line-height: 100rpx;
		font-size: 32rpx;
		color: #333333;
	}

	.scroll-tab .scroll-item.active {
		font-weight: bold;
	}

	.scroll-tab .scroll-item+.scroll-item {
		margin-left: 55rpx;
	}

	.topic-list .img {
		display: block;
		width: 122rpx;
		height: 122rpx;
		border-radius: 10rpx;
	}

	.topic-list .title {
		position: relative;
	}

	.topic-list .btn1 {
		width: 130rpx;
		height: 44rpx;
		border: 1rpx solid #ed1f34;
		border-radius: 4rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #ed1f34;
		line-height: 44rpx;
		text-align: center;
	}
</style>
